<template>
  <div class="emergency">
    <div class="search">
      <el-form :inline="true" size="mini" class="demo-form-inline">
        <el-form-item label="类别">
          <el-select placeholder="类别" v-model="searchform.type">
            <el-option label="告警" value="告警"></el-option>
            <el-option label="预警" value="预警"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间选择">
          <el-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions1"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
         
        </el-form-item>

      </el-form>
    </div>
    <div class="searchmore">
      <el-form ref="form" label-width="110px" label-position="left" size="mini">
        <el-form-item :label="`${searchform.type}类别`">
          <el-radio-group>
            <el-radio label="响应率"></el-radio>
            <el-radio label="响应时间"></el-radio>
            <el-radio label="成功率"></el-radio>
            <el-radio label="吞吐量"></el-radio>
            <el-radio label="网络负载"></el-radio>
            <el-radio label="异常中断"></el-radio>
          </el-radio-group>

          <span style="font-size:12px;color:#606266;margin-left:20px">其他</span>
          <el-select placeholder="其他" value="" style="margin-left:10px">
            <el-option label="其他" value="其他"></el-option>
          </el-select>

        </el-form-item>

        <el-form-item :label="`${searchform.type}级别`">
          <el-radio-group>
            <el-radio label="高"></el-radio>
            <el-radio label="中"></el-radio>
            <el-radio label="低"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择对象">
          <el-select placeholder="选择对象" value="">
            <el-option label="业务系统 -组件 -主机" value="业务系统 -组件 -主机"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-radio-group>
            <el-radio label="已处理"></el-radio>
            <el-radio label="未处理"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="btnoperate">
          <el-button type="primary">确定</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel">
      <div class="panel-title icon-KPIindexname">
        {{searchform.type}}指标分析
      </div>
      <div class="panel-con">
        <div id="c5">
          <diagram-echarts :data="diagramEcharts.c1" :show="diagram.c1" type="style1"></diagram-echarts>
        </div>
      </div>
    </div>

    <div class="panel gaojing">
      <div class="panel-title icon-KPIindexname">
        {{searchform.type}}数据列表
      </div>
      <div class="panel-con">
        <el-table class="taotable" :data="json.portraitC1" v-loading="listLoading">
          <el-table-column type="expand" prop="names">
            <template slot-scope="scope">
              <el-table :show-header="false" :data="json.portraitC1">
                <el-table-column prop="c1" label="序号" width="51">
                </el-table-column>
                <el-table-column prop="c2" label="告警ID" width="91">
                </el-table-column>
                <el-table-column prop="c3" label="时间" width="149">
                </el-table-column>
                <el-table-column prop="c4" label="级别" width="75">
                </el-table-column>
                <el-table-column prop="c5" label="类别" width="75">
                </el-table-column>
                <el-table-column prop="c6" label="所属系统" width="99">
                </el-table-column>
                <el-table-column prop="c7" label="组件">
                </el-table-column>
                <el-table-column prop="c8" label="正常值范围" width="87">
                </el-table-column>
                <el-table-column prop="c9" label="触发值" width="63">
                </el-table-column>
                <el-table-column prop="c10" label="持续时间" width="94">
                </el-table-column>
                <el-table-column prop="c11" label="状态" width="63">
                  <template slot-scope="scope">
                    <span :class="scope.row.c11==1?'f1':'f2'">{{ scope.row.c11==1?'已处理':'未处理' }} </span>
                  </template>
                </el-table-column>
                <el-table-column prop="c12" label="处置措施" width="82">
                  <template slot-scope="scope">
                    <a @click="dialogAdd1=true">编辑</a>
                  </template>
                </el-table-column>
                <el-table-column prop="c13" label="排障助手" width="86">
                  <template slot-scope="scope">
                    <a @click="dialogAdd=true">编辑</a>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
           <el-table-column prop="c1" label="" width="80">
             共100条
          </el-table-column>
          <el-table-column prop="c1" label="序号" width="51">
          </el-table-column>
          <el-table-column prop="c2" label="告警ID" width="91">
          </el-table-column>
          <el-table-column prop="c3" label="时间" width="149">
          </el-table-column>
          <el-table-column prop="c4" label="级别" width="75">
          </el-table-column>
          <el-table-column prop="c5" label="类别" width="75">
          </el-table-column>
          <el-table-column prop="c6" label="所属系统" width="99">
          </el-table-column>
          <el-table-column prop="c7" label="组件">
          </el-table-column>
          <el-table-column prop="c8" label="正常值范围" width="87">
          </el-table-column>
          <el-table-column prop="c9" label="触发值" width="63">
          </el-table-column>
          <el-table-column prop="c10" label="持续时间" width="94">
          </el-table-column>
          <el-table-column prop="c11" label="状态" width="63">
            <template slot-scope="scope">
              <span :class="scope.row.c11==1?'f1':'f2'">{{ scope.row.c11==1?'已处理':'未处理' }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="c12" label="处置措施" width="82">
            <template slot-scope="scope">
              <a @click="dialogAdd1=true">编辑</a>
            </template>
          </el-table-column>
          <el-table-column prop="c13" label="排障助手" width="86">
            <template slot-scope="scope">
              <a @click="dialogAdd=true">编辑</a>
            </template>
          </el-table-column>
        </el-table>
          <div class="compage">
                        <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
                      </div>

        <!-- <el-collapse accordion="">
          <el-collapse-item>
            <template slot="title">
              收敛
              <span>共189条</span>
            </template>

            <el-table :data="json.portraitC1" height="141" border="" style="width: 100%">
              <el-table-column prop="c1" label="序号" width="51">
              </el-table-column>
              <el-table-column prop="c2" label="告警ID" width="91">
              </el-table-column>
              <el-table-column prop="c3" label="时间" width="149">
              </el-table-column>
              <el-table-column prop="c4" label="级别" width="75">
              </el-table-column>
              <el-table-column prop="c5" label="类别" width="75">
              </el-table-column>
              <el-table-column prop="c6" label="所属系统" width="99">
              </el-table-column>
              <el-table-column prop="c7" label="组件">
              </el-table-column>
              <el-table-column prop="c8" label="正常值范围" width="87">
              </el-table-column>
              <el-table-column prop="c9" label="触发值" width="63">
              </el-table-column>
              <el-table-column prop="c10" label="持续时间" width="94">
              </el-table-column>
              <el-table-column prop="c11" label="状态" width="63">
                <template slot-scope="scope">
                  <span :class="scope.row.c11==1?'f1':'f2'">{{ scope.row.c11==1?'已处理':'未处理' }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="c12" label="处置措施" width="82">
                <template slot-scope="scope">
                  <a @click="dialogAdd1=true">编辑</a>
                </template>
              </el-table-column>
              <el-table-column prop="c13" label="排障助手" width="86">
                <template slot-scope="scope">
                  <a @click="dialogAdd=true">编辑</a> 
                </template>
              </el-table-column>
            </el-table>

          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              吞吐量
              <span>共189条</span>
            </template>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              网络负载
              <span>共189条</span>
            </template>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              吞吐量
              <span>共189条</span>
            </template>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              网络负载
              <span>共189条</span>
            </template>
          </el-collapse-item>
        </el-collapse> -->
      </div>
    </div>
    <el-dialog title="处置措施" width="650px" :visible.sync="dialogAdd1">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">

        <el-form-item label="处置人">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="处置措施">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogAdd1 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="paizhangzhushou" title="排障助手" :visible.sync="dialogAdd" width="820px">
      <el-form ref="form" size="mini">
        <div class="search search-dialog">

          <el-form-item label="业务系统：" label-width="90px">
            <el-select value="" placeholder="选择对象">
              <el-option label="区域一" value="选择对象"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间：" label-width="60px">
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" default-value="2010-10-01">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">
              开始分析
            </el-button>
          </el-form-item>

        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            告警清单
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="84">
              <el-table-column property="c1" label="序号" width="51"></el-table-column>
              <el-table-column property="c2" label="级别" width="51"></el-table-column>
              <el-table-column property="c3" label="发生时间" width="97"></el-table-column>
              <el-table-column property="c4" label="规则ID" width="87"></el-table-column>
              <el-table-column property="c5" label="类别" width="75"></el-table-column>
              <el-table-column property="c6" label="业务系统"></el-table-column>
              <el-table-column property="c7" label="组件" width="111"></el-table-column>
              <el-table-column property="c8" label="指标" width="83"></el-table-column>
            </el-table>
            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-KPIindexname">
            告警指标分析
          </div>
          <div class="panel-con">
            <div id="c12" style="height:141px;">
              <diagram-echarts :show="diagram.c12" bg="#fff" :data="diagramEcharts.c12" type="style1"></diagram-echarts>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            日志清单
            <div class="panel-search">
              <el-form-item>
                <el-input></el-input>
                <el-button type="search"></el-button>
              </el-form-item>
            </div>
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="84">
              <el-table-column property="c1" label="序号" width="51"></el-table-column>
              <el-table-column property="c2" label="时间" width="94"></el-table-column>
              <el-table-column property="c3" label="系统名称" width="75"></el-table-column>
              <el-table-column property="c4" label="组件名称"></el-table-column>
              <el-table-column property="c5" label="IP" width="75"></el-table-column>
              <el-table-column property="c6" label="类别" width="76"></el-table-column>
              <el-table-column property="c7" label="种类" width="75"></el-table-column>
              <el-table-column property="c8" label="内容" width="109"></el-table-column>
            </el-table>

            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            事件清单
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="84">
              <el-table-column property="c1" label="事件ID" width="87"></el-table-column>
              <el-table-column property="c2" label="事件描述" width="123"></el-table-column>
              <el-table-column property="c3" label="状态"></el-table-column>
              <el-table-column property="c4" label="应用时间" width="97"></el-table-column>
              <el-table-column property="c5" label="备注" width="251"></el-table-column>
            </el-table>

            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            知识库
            <div class="panel-search">
              <el-form-item>
                <el-input></el-input>
                <el-button type="search"></el-button>
              </el-form-item>
            </div>
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="68">
              <el-table-column property="c1" label="时间" width="99"></el-table-column>
              <el-table-column property="c2" label="问题描述"></el-table-column>
              <el-table-column property="c3" label="处置措施" width="175"></el-table-column>
              <el-table-column property="c4" label="处置人" width="183"></el-table-column>
            </el-table>

            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="clear"></div>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogAdd=false">取消</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import Data from "../data/index";
import diagramEcharts from "../components/portrait/echarts";
export default {
  name: "Emergency",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      list: [
        {
          Id: "1店",
          names: [
            {
              name: "apple",
              num: 1
            },
            {
              name: "banana",
              num: 2
            }
          ]
        },
        {
          Id: "2店",
          names: [
            {
              name: "apple",
              num: 1
            },
            {
              name: "banana",
              num: 2
            }
          ]
        }
      ],
      searchform: {
        type: "告警"
      },
      dialogAdd1: false,
      dialogAdd: false,
      dialogAddTitle: "创建",
      dialogDelete: false,
      dialogSave: false,
      dialogInport: false,
      dialogExport: false,
      pickerOptions1: {
        shortcuts: [
          {
            text: "最近一小时",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 1);
              picker.$emit("pick", date);
            }
          },
          {
            text: "最近4小时",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 4);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      json: {
        portraitC1: Data.portraitC1
      },
      diagram: {
        c1: true,
        c12: true
      },
      diagramEcharts: {
        c12: {
          legend: {
            data: [
              {
                name: "CPU",
                icon: "roundRect"
              },
              {
                name: "内存",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          xAxisData: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
          series: [
            {
              name: "CPU",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06BBA4" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "内存",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        },
        c1: {
          isboundaryGap: true,
          color: "#E1684D",
          xAxisData: [
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00"
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          series: []
        }
      }
    };
  },
  components: {
    diagramEcharts
  },
  mounted() {
    this.initEcharts();
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    initEcharts() {
      let seriesData = [];
      for (var i = 0; i < 12; i++) {
        seriesData.push({
          type: "bar",
          barWidth: 4,
          data: [100, 200, 100, 200, 100, 200, 100, 200, 100]
        });
      }
      this.diagramEcharts.c1.series = seriesData;
    }
  }
};
</script>
<style lang="scss">
@import url(../assets/css/base.css);
.form-xiala {
  .el-input__inner {
    height: 20px;
    line-height: 20px;
  }
  .el-input__icon {
    line-height: 20px;
  }
}
.searchmore {
  .el-form-item--mini.el-form-item {
    margin-bottom: 5px;
  }
  .el-form-item__label,
  .el-radio__label {
    font-size: 12px;
  }
  .dropdown-qita {
    margin-left: 20px;
    font-size: 12px;
  }
}
.paizhangzhushou {
  .el-dialog__body {
    padding: 0px;
  }
  .el-date-editor--daterange {
    width: 260px;
  }
}

.emergency {
  .taotable {
    .el-table__expanded-cell {
      padding: 0px;
      padding-left: 127px;
    }
  }
}
</style>

<style lang="scss" scoped>
.paizhangzhushou {
  .el-dialog__body {
    padding-top: 0px;
  }
  .search-dialog {
    padding: 0px;
    padding-left: 20px;
  }
  .panel {
    margin: 0px 56px;
  }
  .el-form-item {
    float: left;
    margin-right: 10px;
  }
  .buttonlist {
    float: none;
    text-align: center;
    padding: 10px 0px;
    .el-button + .el-button {
      margin-left: 20px;
    }
  }

  .panel-search {
    float: right;
    position: relative;
    .el-button--search {
      position: absolute;
      right: 0px;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(34, 175, 157, 1) 0%,
        rgba(0, 121, 106, 1) 100%
      );
      border-radius: 0px 5px 5px 0px;
    }
  }
}
.emergency {
  .search {
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 9px 0px rgba(17, 116, 104, 0.18);
    height: 68px;
  }
  .searchmore {
    padding: 20px 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 9px 0px rgba(17, 116, 104, 0.18);

    .btnoperate {
      text-align: right;
    }
  }
  #c5 {
    height: 183px;
  }

  .panel {
    padding: 0px 20px;
  }

  .f1 {
    color: rgba(6, 187, 164, 1);
  }

  .f2 {
    color: rgba(248, 154, 0, 1);
  }
}
</style>
